<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/24h.png" alt="">
      </div>
      <h2>今日实时功率</h2>
    </div>
    <div class="consumption_cont">
      <div class="consumption_echarts"></div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      myChart: {},
      tenantid: 1128
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.getPowerToday({ tenantid: this.tenantid })
      this.initChart(res.data)
    },
    // 图表初始化
    initChart(data) {
      this.myChart = this.$echarts.init(document.querySelector('.consumption_echarts'))
      // const arr = [150, 230, 224, 218, 135, 147, 260]
      let date = []
      data.xdates.forEach(item => date.push(item.substring(10,item.length - 3)))
      const arr = data.ypowers
      // const maxNum = Math.max.apply(null, [...arr]) * 2
      // let maxArr = []
      // for (let i = 0; i < arr.length; i++) {
      //   maxArr.push(maxNum)
      // }
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            extraCssText: 'background: #023881;border:none;color:#fff;opacity: 0.9',
            formatter(params) {
              // console.log(params[0].data)
              return `功率：<span style="color: #50D5FD">${params[0].data}</span>`
            }
          },
          xAxis: {
            type: 'category',
            data: date,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#50D5FD'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            name: '单位：KW',
            nameTextStyle: {
              color: '#50D5FD'
            },
            type: 'value',
            splitNumber: 6,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5fa1ff'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#50D5FD'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#427fd5'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          },
          grid: {
            // right: '25%',
            // top: '23%',
            bottom: '25%',
            left: '12%',
            // x: "12%",//x 偏移量
            // y: "7%", // y 偏移量
            width: '82%', // 宽度
            height: '60%'
          },
          legend: {
            // data: ['自用电量', '公用电量'],
            // top: '5%',
            // itemHeight: 8,
            // itemWidth: 12,
            // textStyle: {
            //   color: [],
            //   fontSize: '0.1rem'
            // }
          },
          dataZoom: [
            {
              type: 'slider',
              // show: true,
              height: 15,
              bottom: 18,
              // fillerColor: '#409EFF',
              // borderColor: 'transparent',
              // backgroundColor: '#7e94bb',
              // // 拖拽手柄样式 svg 路径
              // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
              // handleColor: '#50d5fd',
              // handleSize: 10,
              start: 20,
              end: 80,
              textStyle: {
                color: '#50fde7'
              }
            }
          ],
          series: [
            {
              data: arr,
              type: 'line',
              zlevel: 4,
              symbol: 'circle', //折线点设置为实心点
              symbolSize: 7, //折线点的大小
              itemStyle: {
                normal: {
                  color: '#50D5FD',
                  // borderColor: '#ffffff', //拐点边框颜色
                  // borderWidth: 2, //拐点边框大小
                  lineStyle: {
                    color: '#50D5FD'
                  }
                },
                emphasis: {
                  borderColor: '#50D5FD',
                  borderWidth: 3,
                },
              }
            },
            // {
            //   data: maxArr,
            //   type: 'bar',
            //   barWidth: 30,
            //   barGap: '-100%',
            //   zlevel: 3,
            //   itemStyle: {
            //     normal: {
            //       // 设置颜色渐变
            //       color: 'rgba(49, 100, 158, 0.6)'
            //       // color: 'rgba(21, 58, 94, 0.2)'
            //     }
            //   },
            // }
          ]
        }
      )
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.consumption_cont {
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;

  .consumption_echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
